<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bezier Curve</title>
  <style>
    .bezier-container {
      font-size: 20px;
    }

    .bezier-container+.bezier-container {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="bezier-container">
    <svg>
      <path d="M 10 10 C 20 20 40 20 50 10" fill="red"></path>
    </svg>
  </div>
  <div class="bezier-container">
    <!-- <?xml version="1.0" encoding="UTF-8"?>
    <svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="切换（H5)" transform="translate(-295.000000, -330.000000)" fill="#FE6643">
                <g id="编组-3" transform="translate(0.000000, 271.000000)">
                    <path d="M302,59 C305.865993,59 309,62.1340068 309,66 C309,69.8659932 305.865993,73 302,73 C298.134007,73 295,69.8659932 295,66 C295,62.1340068 298.134007,59 302,59 Z M305.851308,63.1469923 C305.656046,62.9517301 305.339464,62.9517301 305.144202,63.1469923 L305.144202,63.1469923 L301.015375,67.7656105 L298.85205,65.1547096 C298.656788,64.9594475 298.340205,64.9594475 298.144943,65.1547096 C297.949681,65.3499718 297.949681,65.6665543 298.144943,65.8618164 L298.144943,65.8618164 L300.619209,68.8565444 C300.713211,68.9555664 300.822219,69.001183 301.015375,69.001183 C301.208531,69.001183 301.24765,68.9555664 301.326316,68.8565444 L301.326316,68.8565444 L305.851308,63.8540991 C306.046571,63.6588369 306.046571,63.3422544 305.851308,63.1469923 Z" id="形状结合"></path>
                </g>
            </g>
        </g>
    </svg> -->
    <svg viewBox="0 0 200 200">
      <g>
        <path d="M 10 10
            Q 100 70, 190 10" stroke="pink" fill="none" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 10 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 20 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 30 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 40 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 50 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 60 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 70 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 80 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 90 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 100 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 110 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 120 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 130 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 140 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 150 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 160 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 170 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 180 H 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 190 H 200" />
        <!-- <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 0 200 H 200" /> -->
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 10 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 20 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 30 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 40 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 50 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 60 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 70 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 80 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 90 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 100 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 110 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 120 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 130 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 140 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 150 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 160 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 170 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 180 0 V 200" />
        <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 190 0 V 200" />
        <!-- <path stroke="#333" fill="none" stroke-width="1" stroke-dasharray="2,2" d="M 200 0 V 200" /> -->

      </g>
    </svg>
  </div>
</body>

</html>